<template>
  <div class="bg">
    <slot name="content"></slot>
    <div class="test">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/test.png">
    </div>
    <div class="game">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/game.png">
    </div>
    <div class="title">
        <slot name="title"></slot>
    </div>
    <div class="close">
        <slot name="close"></slot>
    </div>
    <div class="tubeleft">
      <div class="tube1">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg1.png">
      </div>
      <div class="tube2" v-on:click="switch_1" v-show="sg1_withoutd">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg2_withoutd.png">
      </div>
      <div class="tube2" v-show="sg1">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg2_withd.png">
      </div>
      <div class="tube3" v-on:click="switch_2" v-show="sg2">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg3_withd.png">
      </div>
      <div class="tube3" v-on:click="switch_2" v-show="sg2_withoutd">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg3_withoutd.png">
      </div>
      <div class="tube4">
        <img slot="tube4" class="img-item" src="../../../assets/science/1.0/3-assets/sg4.png">
      </div>
    </div>
    <div class="tuberight">
      <div class="tube1">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg4.png">
      </div>
      <div class="tube2" v-on:click="switch_3" v-show="sg3_withoutd" style="left:80px;">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg6_withoutd.png">
      </div>
      <div class="tube2" v-show="sg3" style="left:80px;">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg6_withd.png">
      </div>
      <div class="tube3" v-on:click="switch_4" v-show="sg4_withoutd" style="left:130px;">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg7_withoutd.png">
      </div>
      <div class="tube3" v-show="sg4" style="left:130px;">
        <img class="img-item" src="../../../assets/science/1.0/3-assets/sg7_withd.png">
      </div>
      <div class="tube4">
        <img slot="tube4" class="img-item" src="../../../assets/science/1.0/3-assets/sg1.png">
      </div>
    </div>
    <div class="one" v-on:click="switch_1">
      <h2>1</h2>
    </div>
    <div class="two" v-on:click="switch_2">
      <h2>2</h2>
    </div>
    <div class="three" v-on:click="switch_3">
      <h2>3</h2>
    </div>
    <div class="four" v-on:click="switch_4">
      <h2>4</h2>
    </div>
    <div class="titlec" v-show="alltitle_show">
      <div class="title1">
        <img class="title-img" src="../../../assets/icon/h0001.png">
        <div class="title-item">
          <div v-show="title1_1_show">
            <slot name="title1-1"></slot>
          </div>
          <div v-show="title2_1_show">
            <slot name="title2-1"></slot>
          </div>
          <div v-show="title3_1_show">
            <slot name="title3-1"></slot>
          </div>
          <div v-show="title4_1_show">
            <slot name="title4-1"></slot>
          </div>
        </div>
      </div>
      <div class="title2">
        <img class="title-img" src="../../../assets/icon/h0002.png">
        <div class="title-item">
          <div v-show="title1_2_show">
            <slot name="title1-2"></slot>
          </div>
          <div v-show="title2_2_show">
            <slot name="title2-2"></slot>
          </div>
          <div v-show="title3_2_show">
            <slot name="title3-2"></slot>
          </div>
          <div v-show="title4_2_show">
            <slot name="title4-2"></slot>
          </div>
        </div>
      </div>
      <div class="title3">
        <img class="title-img" src="../../../assets/icon/h0003.png">
        <div class="title-item">
          <div v-show="title1_3_show">
            <slot name="title1-3"></slot>
          </div>
          <div v-show="title2_3_show">
            <slot name="title2-3"></slot>
          </div>
          <div v-show="title3_3_show">
            <slot name="title3-3"></slot>
          </div>
          <div v-show="title4_3_show">
            <slot name="title4-3"></slot>
          </div>
        </div>
      </div>
      <div class="title4">
        <img class="title-img" src="../../../assets/icon/h0004.png">
        <div class="title-item">
          <div v-show="title1_4_show">
            <slot name="title1-4"></slot>
          </div>
          <div v-show="title2_4_show">
            <slot name="title2-4"></slot>
          </div>
          <div v-show="title3_4_show">
            <slot name="title3-4"></slot>
          </div>
          <div v-show="title4_4_show">
            <slot name="title4-4"></slot>
          </div>
        </div>
      </div>
      <div class="title5">
        <img class="title-img" src="../../../assets/icon/h0005.png">
        <div class="title-item">
          <div v-show="title1_5_show">
            <slot name="title1-5"></slot>
          </div>
          <div v-show="title2_5_show">
            <slot name="title2-5"></slot>
          </div>
          <div v-show="title3_5_show">
            <slot name="title3-5"></slot>
          </div>
          <div v-show="title4_5_show">
            <slot name="title4-5"></slot>
          </div>
        </div>
      </div>
      <div class="title6">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <div v-show="title1_6_show">
            <slot name="title1-6"></slot>
          </div>
          <div v-show="title2_6_show">
            <slot name="title2-6"></slot>
          </div>
          <div v-show="title3_6_show">
            <slot name="title3-6"></slot>
          </div>
          <div v-show="title4_6_show">
            <slot name="title4-6"></slot>
          </div>
        </div>
      </div>
      <div class="title7">
        <img class="title-img" src="../../../assets/icon/h0006.png">
        <div class="title-item">
          <div v-show="title1_7_show">
            <slot name="title1-7"></slot>
          </div>
          <div v-show="title2_7_show">
            <slot name="title2-7"></slot>
          </div>
          <div v-show="title3_7_show">
            <slot name="title3-7"></slot>
          </div>
          <div v-show="title4_7_show">
            <slot name="title4-7"></slot>
          </div>
        </div>
      </div>
      <div class="title8">
        <img class="title-img" src="../../../assets/icon/h0007.png">
        <div class="title-item">
          <div v-show="title1_8_show">
            <slot name="title1-8"></slot>
          </div>
          <div v-show="title2_8_show">
            <slot name="title2-8"></slot>
          </div>
          <div v-show="title3_8_show">
            <slot name="title3-8"></slot>
          </div>
          <div v-show="title4_8_show">
            <slot name="title4-8"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  data () {
    return {
      sg1_withoutd: true,
      sg1: false,
      sg2: true,
      sg2_withoutd: false,
      sg3_withoutd: true,
      sg3: false,
      sg4_withoutd: true,
      sg4: false,
      alltitle_show: false,
      title1_1_show: false,
      title1_2_show: false,
      title1_3_show: false,
      title1_4_show: false,
      title1_5_show: false,
      title1_6_show: false,
      title1_7_show: false,
      title1_8_show: false,
      title2_1_show: false,
      title2_2_show: false,
      title2_3_show: false,
      title2_4_show: false,
      title2_5_show: false,
      title2_6_show: false,
      title2_7_show: false,
      title2_8_show: false,
      title3_1_show: false,
      title3_2_show: false,
      title3_3_show: false,
      title3_4_show: false,
      title3_5_show: false,
      title3_6_show: false,
      title3_7_show: false,
      title3_8_show: false,
      title4_1_show: false,
      title4_2_show: false,
      title4_3_show: false,
      title4_4_show: false,
      title4_5_show: false,
      title4_6_show: false,
      title4_7_show: false,
      title4_8_show: false
    }
  },
  mounted () {
    var links = document.querySelectorAll('a')
    Array.prototype.forEach.call(links, function (links) {
      links.addEventListener('click', function (evt) {
        evt.preventDefault()
        console.log(this)
        console.log(this.href)
        if (this.href.slice(0, 16) === 'http://127.0.0.1') {
          console.log(this.href)
          const BrowserWindow = require('electron').remote.BrowserWindow
          BrowserWindow.showDevTools = false
          let win = new BrowserWindow({
            width: 1280,
            height: 720,
            webPreferences: {
              nodeIntegration: false
            },
            show: false,
            backgroundColor: '#2e2c29'
          })
          win.setFullScreen(true)
          win.loadURL(this.href)
          win.once('ready-to-show', () => {
            win.show()
          })
        } else {
          console.log('======')
          window.location.href = this.href
        }
      })
    })
  },
  methods: {
    switch_1: function () {
      this.sg1_withoutd = false
      this.sg1 = true
      this.sg2 = false
      this.sg2_withoutd = true
      this.sg3 = false
      this.sg3_withoutd = true
      this.sg4 = false
      this.sg4_withoutd = true
      this.alltitle_show = true
      this.title1_1_show = true
      this.title1_2_show = true
      this.title1_3_show = true
      this.title1_4_show = true
      this.title1_5_show = true
      this.title1_6_show = true
      this.title1_7_show = true
      this.title1_8_show = true
      this.title2_1_show = false
      this.title2_2_show = false
      this.title2_3_show = false
      this.title2_4_show = false
      this.title2_5_show = false
      this.title2_6_show = false
      this.title2_7_show = false
      this.title2_8_show = false
      this.title3_1_show = false
      this.title3_2_show = false
      this.title3_3_show = false
      this.title3_4_show = false
      this.title3_5_show = false
      this.title3_6_show = false
      this.title3_7_show = false
      this.title3_8_show = false
      this.title4_1_show = false
      this.title4_2_show = false
      this.title4_3_show = false
      this.title4_4_show = false
      this.title4_5_show = false
      this.title4_6_show = false
      this.title4_7_show = false
      this.title4_8_show = false
    },
    switch_2: function () {
      this.sg1_withoutd = true
      this.sg1 = false
      this.sg2 = true
      this.sg2_withoutd = false
      this.sg3 = false
      this.sg4 = false
      this.sg4_withoutd = true
      this.sg3_withoutd = true
      this.alltitle_show = true
      this.title1_1_show = false
      this.title1_2_show = false
      this.title1_3_show = false
      this.title1_4_show = false
      this.title1_5_show = false
      this.title1_6_show = false
      this.title1_7_show = false
      this.title1_8_show = false
      this.title2_1_show = true
      this.title2_2_show = true
      this.title2_3_show = true
      this.title2_4_show = true
      this.title2_5_show = true
      this.title2_6_show = true
      this.title2_7_show = true
      this.title2_8_show = true
      this.title3_1_show = false
      this.title3_2_show = false
      this.title3_3_show = false
      this.title3_4_show = false
      this.title3_5_show = false
      this.title3_6_show = false
      this.title3_7_show = false
      this.title3_8_show = false
      this.title4_1_show = false
      this.title4_2_show = false
      this.title4_3_show = false
      this.title4_4_show = false
      this.title4_5_show = false
      this.title4_6_show = false
      this.title4_7_show = false
      this.title4_8_show = false
    },
    switch_3: function () {
      this.sg1_withoutd = true
      this.sg1 = false
      this.sg2 = false
      this.sg2_withoutd = true
      this.sg3 = true
      this.sg3_withoutd = false
      this.sg4 = false
      this.sg4_withoutd = true
      this.alltitle_show = true
      this.title1_1_show = false
      this.title1_2_show = false
      this.title1_3_show = false
      this.title1_4_show = false
      this.title1_5_show = false
      this.title1_6_show = false
      this.title1_7_show = false
      this.title1_8_show = false
      this.title2_1_show = false
      this.title2_2_show = false
      this.title2_3_show = false
      this.title2_4_show = false
      this.title2_5_show = false
      this.title2_6_show = false
      this.title2_7_show = false
      this.title2_8_show = false
      this.title3_1_show = true
      this.title3_2_show = true
      this.title3_3_show = true
      this.title3_4_show = true
      this.title3_5_show = true
      this.title3_6_show = true
      this.title3_7_show = true
      this.title3_8_show = true
      this.title4_1_show = false
      this.title4_2_show = false
      this.title4_3_show = false
      this.title4_4_show = false
      this.title4_5_show = false
      this.title4_6_show = false
      this.title4_7_show = false
      this.title4_8_show = false
    },
    switch_4: function () {
      this.sg1_withoutd = true
      this.sg1 = false
      this.sg2 = false
      this.sg2_withoutd = true
      this.sg3 = false
      this.sg3_withoutd = true
      this.sg4 = true
      this.sg4_withoutd = false
      this.alltitle_show = true
      this.title1_1_show = false
      this.title1_2_show = false
      this.title1_3_show = false
      this.title1_4_show = false
      this.title1_5_show = false
      this.title1_6_show = false
      this.title1_7_show = false
      this.title1_8_show = false
      this.title2_1_show = false
      this.title2_2_show = false
      this.title2_3_show = false
      this.title2_4_show = false
      this.title2_5_show = false
      this.title2_6_show = false
      this.title2_7_show = false
      this.title2_8_show = false
      this.title3_1_show = false
      this.title3_2_show = false
      this.title3_3_show = false
      this.title3_4_show = false
      this.title3_5_show = false
      this.title3_6_show = false
      this.title3_7_show = false
      this.title3_8_show = false
      this.title4_1_show = true
      this.title4_2_show = true
      this.title4_3_show = true
      this.title4_4_show = true
      this.title4_5_show = true
      this.title4_6_show = true
      this.title4_7_show = true
      this.title4_8_show = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.bg{
  background:url(../../../assets/science/1.0/3-assets/bg.png);
  background-size:100%;
  height:720px;
  width:1280px;
  position: relative;
  margin:0 auto;
}
.btn_go{
  height:100%;
  width:100%;
  opacity: 0;
  cursor:pointer;
}
a{
  height:100%;
  width:100%;
  color:black;
  text-decoration: none;
}
.content{
  position: absolute;
  width:90px;
  height:43px;
  top:30px;
  left:35px;
  cursor:pointer;
}
.close{
  background:url(../../../assets/science/1.0/3-assets/close.png) no-repeat;
  background-size:100%;
  position: absolute;
  width:50px;
  height:50px;
  right:35px;
  top:30px;
}
.img-item{
  width:100%;
  height:100%;
  position: absolute;
}
.test{
  position: absolute;
  width:150px;
  height:110px;
  top:30px;
  left:230px;
}
.game{
  position: absolute;
  width:150px;
  height:110px;
  top:30px;
  right:230px;
}
.title{
  position: absolute;
  width:520px;
  height:80px;
  top:50px;
  left:380px;
  text-align: center;
  font-size: 38px;
  letter-spacing: 5px;
  font-weight: 900;
}
.tubeleft{
  position:absolute;
  width:250px;
  height:365px;
  left:90px;
  top:205px;
}
.tuberight{
  position:absolute;
  width:250px;
  height:365px;
  right:60px;
  top:205px;
}
.tube1{
  position:absolute;
  width:52px;
  height:365px;
  left:16px;
}
.tube2{
  position:absolute;
  width:52px;
  height:365px;
  left:68px;
  cursor:pointer;
}
.tube3{
  position:absolute;
  width:52px;
  height:365px;
  left:123px;
  cursor:pointer;
}
.tube4{
  position:absolute;
  width:52px;
  height:365px;
  left:185px;
}
.one{
  width:50;
  height:50;
  position: absolute;
  left:180px;
  top:410px;
  cursor:pointer;
}
.two{
  width:50;
  height:50;
  position: absolute;
  left:235px;
  top:410px;
  cursor:pointer;
}
.three{
  width:50;
  height:50;
  position: absolute;
  right:200px;
  top:410px;
  cursor:pointer;
}
.four{
  width:50;
  height:50;
  position: absolute;
  right:150px;
  top:410px;
  cursor:pointer;
}
.titlec{
  position: absolute;
  width:500px;
  height:500px;
  left:430px;
  top:150px;
}
.title-img{
  width:30px;
  height:30px;
  float: left;
}
.title-item{
  width:153px;
  height:28px;
  margin-top:5px;
  float:right;
  font-weight: 800;
}
.title1{
  width:190px;
  height:28px;
  background-color: white;
  opacity: 0.8;
  border-radius:12px;
  margin-left:150px;
  margin-top:88px;
}
.title2,.title3,.title4,.title5,.title6,.title7,.title8{
  width:190px;
  height:28px;
  background-color: white;
  opacity: 0.8;
  border-radius:12px;
  margin-left:150px;
  margin-top:8px; 
}
</style>
